<template>
	<view class="padding-20 Afont overhid" style="min-height: 100vh;background-color: #DAEAF0;">

		<view class="padding-top-60">
			<image class="w-80 h-80" :src="Imgbase + '/winter_goodpoor_img1.png'" mode="aspectFit" @click="back">
			</image>
		</view>

		<view class="item padding-top-40 color1">
			<view class="font-40">
				发布单价
			</view>

			<view class="padding-top-20 df alc">
				<view class="w-200 h-50 pricebgc df alc padding-left-15">
					<input class="font-38 font-weight-500" type="digit" v-model="cost" style="color: #E60000;" />
				</view>
				<view class="font-32 padding-left-15">
					元/赏
				</view>
				<view class="padding-left-20">
					建议价: <text v-if="type ==1"
						style="color: #E60000;padding-left: 10rpx;">{{bagarr.length > 0?Number(averagePrice/allnum).toFixed(2):0}}</text>

					<text v-else
						style="color: #E60000;padding-left: 10rpx;">{{bagarr.length > 0?Number(averagePrice).toFixed(2):0}}</text>
					元
				</view>
			</view>

			<view class="padding-15">
				建议价出售平台不收取手续费，超过建议价平台将收取付款1.5%手续费
			</view>
		</view>

		<view class="item padding-top-30 color1 padding-bottom-250 overhid">
			<view class="font-40">
				选择要发布的赏品
			</view>

			<!-- <view class="font-30 padding-top-10" v-if="bagarr.length > 0">
				当前均价为：
			</view> -->

			<view class="padding-top-30">
				<view class="w-167 h-250 radius-10  margin-bottom-20 bagitem" style="float: left;position: relative;"
					v-for="(item,index) in bagarr" :key="index"
					:style="{background:'url('+Imgbase+'/new_goodbp_img8.png)','background-size':'100% 100%',}">
					<image class="w100 h-150 radius-10" style="border: 4rpx solid #8A5E51;" :src="item.adimage"
						mode="aspectFill">
					</image>

					<view class="w100 one-line font-20 padding-left-10 padding-right-10">
						{{item.name}}
					</view>

					<view class="w100  padding-left-10 padding-right-10 font-20 padding-top-5">
						数量：{{item.checked_num}}
					</view>
					<view class="w100  padding-left-10 padding-right-10 font-20 padding-top-5">
						建议价：{{item.back_price}}
					</view>
					<!-- <view class="font-weight-500 " v-if="item.checked == false" @click="is_check(index)"
						style="position: absolute;bottom: 10rpx;right: 10rpx;">
						x{{item.num}}
					</view> -->
				</view>
				<view class=" fl" style="color: #909399;" @click="openbag">
					<view class="w-165 h-250 add text-center radius-14">
						<view class="font-80 padding-top-40">
							+
						</view>
						<view class="padding-top-0">
							添加赏品
						</view>
					</view>
				</view>
			</view>

		</view>


		<view class="fixbtn text-center Afont font-40 radius-12" @click="gocreate()">
			确认发布
		</view>

		<!-- 选择赏品 -->
		<u-popup :show="bagshow" @close="bagclose">
			<view class="w100 h-20">
				
			</view>
			<scroll-view scroll-y class="w100" scroll-with-animation style="height: 70vh;overflow: hidden;">
				<view class="box_item padding-top-50 padding-bottom-150">
					<view class="w-165 h-230 radius-10  margin-bottom-20 bagitem"
						style="float: left;position: relative;" v-for="(item,index) in baglist" :key="index"
						:style="{background:'url('+Imgbase+'/new_goodbp_img8.png)','background-size':'100% 100%',}" v-if="item.origin != 15 && item.origin != 17 ">
						<image class="w100 h-150 radius-10" style="border: 4rpx solid #8A5E51;" @click="is_check(index)"
							:src="item.adimage" mode="aspectFill">
						</image>

						<view class="w100 one-line font-20 padding-left-10 padding-right-10">
							{{item.name}}
						</view>

						<view class="w100 flex-between padding-left-10 padding-right-10">
							<view class=" w-40 h-25 text-center" @click="numjian(index)">
								<image class="w100 h100" :src="Imgbase + '/new_goodadvan_img5.png'" mode="aspectFit">
								</image>
							</view>
							<view class="font-22 font-weight-500 padding-top-4" style="width: 60%;color: #764620;">
								<input class="text-center w100" type="number" v-model="item.checked_num"
									@input="inputnum(index)" />
							</view>
							<view class=" h-25 w-40 text-center" @click="numjia(index)">
								<image class="w100 h100" :src="Imgbase + '/new_goodadvan_img4.png'" mode="aspectFit">
								</image>
							</view>
						</view>
						<!-- <view class="font-weight-500 " v-if="item.checked == false" @click="is_check(index)"
							style="position: absolute;bottom: 10rpx;right: 10rpx;">
							x{{item.num}}
						</view> -->
						<view @click="is_check(index)" class="w-35 h-35 radiusb-50"
							style="position: absolute;top: 4rpx;left: 4rpx;background-color: #fff;"
							:style="{'border':item.checked?'none':'4rpx solid #cccccc'}">
							<image style="transition: .3s;" :style="{'opacity':item.checked?'1':'0'}" class="w100 h100"
								:src="Imgbase + '/1zhan_new_duih.png'" mode="aspectFit"></image>
						</view>
					</view>

					<view class="quebtn text-center lh-70 font-34" @click="pushbag">
						确定
					</view>

				</view>
			</scroll-view>
		</u-popup>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase: getApp().globalData.Imgbase,
				bagshow: false,
				baglist: [],
				bagarr: [],
				cost: '',
				averagePrice: 0,
				allnum: 0,
				type: 0
			}
		},
		onLoad(e) {
			this.type = e.id

			console.log(this.type)
		},
		onShow() {
			this.baglist = []
			this.userBag()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			// 确认发布
			async gocreate() {
				var _this = this,
					arr = []

				if (_this.cost == '') {
					this.$refs.uToast.show({
						message: "请填写发布单价",
					})
					return
				}

				if (_this.bagarr.length == 0) {
					this.$refs.uToast.show({
						message: "请添加赏品",
					})
					return
				}

				this.bagarr.forEach(function(it) {
					arr.push({
						"goods_id": it.goods_id,
						"num": it.checked_num,
						"version": it.shop_good_ver
					})
				})

				let url = ''
				if (_this.type == 1) {
					url = 'Usersys/createPoor'
				} else {
					url = 'shop/userSell'
				}

				let item = await this.$api.post(url, {
					token: uni.getStorageSync('token'),
					ids: JSON.stringify(arr),
					cost: Number(_this.cost),
					price: Number(_this.cost),
				})

				if (item.code == '1') {
					this.$refs.uToast.show({
						message: item.msg,
					})
					_this.bagarr = []
					_this.baglist = []
					_this.cost = ''
					this.userBag()
				}


			},
			// 确定按钮 --- 选择赏品
			pushbag() {
				var _this = this,
					arr = [],
					price = 0
				this.bagarr = []
				this.allnum = 0

				setTimeout(() => {
					_this.baglist.forEach(function(it) {
						if (it.checked) {
							arr.push(it)
							price += it.checked_num * Number(it.back_price)
							_this.allnum += Number(it.checked_num)
						}
					})
					_this.averagePrice = Number(price).toFixed(2)
				}, 100)
				this.bagarr = arr
				this.bagshow = false
			},
			inputnum(e) {
				let _this = this
				if (this.baglist[e].checked_num > this.baglist[e].num) {
					_this.$nextTick(() => {
						_this.baglist[e].checked_num = this.baglist[e].num
					})
				}
			},
			// 加
			numjia(e) {
				let _this = this
				if (this.baglist[e].checked_num < this.baglist[e].num) {
					this.baglist[e].checked_num++
				}
			},
			// 减
			numjian(e) {
				let _this = this
				if (this.baglist[e].checked_num > 0) {
					this.baglist[e].checked_num--
				}

				if (this.baglist[e].checked_num == 0) {
					this.baglist[e].checked = false
				}
			},
			// 选择背包赏品
			is_check(e) {
				this.baglist[e].checked = !this.baglist[e].checked
			},
			// 背包列表
			async userBag() {
				let _this = this
				let item = await this.$api.post('Usersys/userBag', {
					token: uni.getStorageSync('token'),
					page: _this.page,
					tab: 0,
					rare: '',
					lock: 0,
					limit: 999,
					dui: 1
				})
				item.data.list.forEach(function(it, idx) {
					it.checked = false
					it.checked_num = it.num
				})
				this.baglist = item.data.list
			},
			// 关闭选择赏品弹窗
			bagclose() {
				this.bagshow = false
			},
			// 打开选择赏品弹窗
			openbag() {
				this.bagshow = true
			}
		},
	}
</script>

<style lang="less" scoped>
	.box_item {
		width: 95%;
		overflow: hidden;
		margin: 0 auto;
		position: relative;

		.quebtn {
			width: 70%;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #5C5C92;
			position: fixed;
			bottom: 40rpx;
			left: 15%;
			z-index: 99;
			color: #fff;
		}
	}

	.bagitem {
		margin-right: 15rpx;
	}

	.bagitem:nth-child(4n) {
		margin-right: 0;
	}

	.add {
		border: 4rpx solid #909399;
		border-style: dashed;
	}

	.pricebgc {
		border-bottom: 6rpx solid #5C5C92;
	}

	.color1 {
		color: #5C5C92;
	}

	.fixbtn {
		position: fixed;
		bottom: 100rpx;
		width: 50%;
		left: 25%;
		background-color: #5C5C92;
		padding: 20rpx 0 30rpx;
		color: #fff;
	}
</style>